<template>
  <div id="appWarp" ref="appWarp" class="appWarp dont-override" @scroll="scrollChange" @mousemove="mousemove" @mouseup="mouseup" @mouseleave="mouseup" @click="bgClick">

      <div class="editType">
        <el-radio-group v-model="editType" size="mini" @click.native.stop="">
          <el-radio-button label="editor">编辑模式</el-radio-button>
          <el-radio-button label="preview">预览模式</el-radio-button>
        </el-radio-group>
      </div>
    <div v-if="canDragType=='widgetScene'">
      <div id="stage" class="app" :class="[phoneSize.name.toLowerCase().replace(/\s+/, '-')]" :style="{width: phoneSize.width, minHeight: phoneSize.height}">
        <node :info="fields" v-if="editType=='editor'" ref="node" />
        <Prenode v-if="fields&&editType=='preview'" :info="fields" :tabs="tabsField" />
      </div>

    </div>

    <div v-else>
      <Tables v-if="editType=='editor'" ref="node" />
      <tablePrenode v-if="tableField&&editType=='preview'" :info="fields" :tableinfo="tableField" />
    </div>

  </div>
</template>

<script>
import Node from '../Node'
import Prenode from '../PerviewNode'
import tablePrenode from '../TablePerviewNode'
import Tables from '../tables'
import BaseComponent from '@/widgets/extend/BaseComponent'
import cloneDeep from 'lodash/cloneDeep'
import { mapState, mapGetters } from 'vuex'
import { sleep } from '@/assets/js/common'
import draggable from 'vuedraggable'
import { load } from '@/widgets/helper/setting/dict'

export default {
  name: 'WidgetScene',
  mixins: [BaseComponent],
  components: {
    Node, Prenode, draggable,Tables,tablePrenode
  },
  computed: {
    ...mapState({
      phoneSize: state => state.setting.phoneSize,
      form: state => state.formModel,
      fields: state => state.fields,
      tableField: state => state.tableField,
      tabsField: state => state.tabsField,
      editField: state => state.editField
    }),
    ...mapGetters(['model']),
    sortable_item: {
      get() {
        return this.$store.state.fields
      },
      set(value) {

      }
    },
    dragOptions2() {
      return {
        animation: 0,
        ghostClass: 'ghost',
        group: {
          // 只允许放置shared的控件,禁止pull
          put: ['shared']
        }
      }
    },
    classes() {
      return {
        'is-empty': this.fields.length === 0
      }
    },
    canDragType: function () {
      return this.$route.query.types && this.$route.query.types == 2 ? "widgetList" : "widgetScene";
    },
  },
  watch: {
    canDragType: function (params) {
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      this.$store.commit('setEditTableField', null)
    },
    active: function (params) {
      if (this.active) {
        console.log(222222, this.$store)
        this.selectNode = this.$store.nodeInfo
        this.selectNodeStacked = window.$vue && window.$vue.stacked
      }
    },
    editType: {
      handler(val, oldval) {
        window.EDIT_TYPE = String(val).toUpperCase()
        this.previewInfo = cloneDeep(this.info)
        this.ema && this.ema.fire('edit-type.change', window.EDIT_TYPE)
        if (window.EDIT_TYPE == 'EDITOR' && this.ema && this.selectNode) {
          this.$nextTick(() => {
            this.ema.fire('select.one', this.selectNode.id)
          })
        }
        this.$store.commit('setEditField', null)
        this.$store.commit('setEditButtonField', null)
        this.$store.commit('setEditTableField', null)
      },
      immediate: true
    }
  },
  data: function () {
    return {
      tab_id: '0',
      info: {},
      packedNodeStack: [],
      previewInfo: null,
      selectNode: null,
      selectNodeStacked: true,
      editType: 'editor',
      formData: {},
      showHelper: null,
      dragging: false,
      ismousedown: false,
      load: load
    }
  },
  beforeCreate: function () {
  },
  created: function () {

    // console.log(this.$store.state)
    // console.log(window)
  },
  mounted: function () {
    this.selectNode = this.$store.state.nodeInfo
    console.log(222222, this.selectNode)
    this.selectNodeStacked = window.$vue && window.$vue.stacked

    this.ema.bind('select.oneInfo', ({ vm }) => {
      console.log('scene', vm.nodeInfo)
      this.selectNode = vm.nodeInfo
      this.selectNodeStacked = vm.stacked
    })
    this.ema.bind('select.noOne', () => {
      this.selectNode = null
      this.selectNodeStacked = true;
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      this.$store.commit('setEditTableField', null)
    })
    this.ema.bind('nodeInfo.replace', info => {
      this.info = info
    })
    this.ema.bind('nodeInfo.change', () => {
      this.info = window.Editor.nodeInfo
    })
    this.ema.bind('packedNode.push', (node) => {
      this.packedNodeStack.push(node)
      this.info = node
    })
    this.ema.bind('packedNode.pop', () => {
      this.packedNodeStack.pop()
      const len = this.packedNodeStack.length
      this.info = len == 0 ? window.Editor.nodeInfo : this.packedNodeStack[len - 1]
    })
    window.$app = this
  },
  methods: {
    clone(data) {
      console.log('clone')
      return JSON.parse(JSON.stringify(data))
    },
    scrollChange: function (params) {
      var appWarp = this.$refs['appWarp']
      this.ema.fire('appWarpOffsetChange', {
        top: appWarp.scrollTop,
        left: appWarp.scrollLeft
      })
    },
    /**
     * 背景点击，处理选中内容
     */
    bgClick: function () {
      this.ema.fire('hide.contextMenu')
      this.ema.fire('select.noOne')
    },
    mouseup: function (ev) {
      this.ema.fire('ui.mouseup', ev)
    },
    mousemove: function (ev) {
      this.ema.fire('ui.mousemove', ev)
    },
  }
}
</script>
 <style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
@require '../../../assets/style/base.styl';
@require '../../../assets/style/m-1px.styl';
@require '../../../assets/style/animate.min.css';
@require '../../../assets/style/custome-animate.css';

.appWarp.dont-override {
  position: relative;
  font-size: 12px;
  width: 100%;
  height: 100%;
  // height: calc(100% - 100px);
  overflow: auto;
  left: auto;
  right: auto;
  bottom: 0;
  // padding: 25px;
  box-sizing: content-box;

  .headertool {
    left: 0;
    right: 0;
    top: 29px;
    position: fixed;
    padding: 5px 10px;
    margin: 1px;
    z-index: 10000;
    text-align: center;
  }

  .editType {
    left: 0;
    right: 0;
    margin: 5px auto;
    width: 200px;
    display: block;
    z-index: 10000;
    top: 0px;
    position: fixed;

    .el-radio-group {
      box-shadow: 0px 8px 24px 1px #000000bd;
    }
  }

  .app {
    position: relative;
    margin: 0 auto 0px;
    font-size: 12px;
    color: #000000;
    // background-color: #ffffff;
    transform: translate(0, 0);

    .mask {
      cursor: move;

      &.is-helper {
        /deep/ {
          .xdh-form-item {
            display: block;
            top: -16px;
            height: 30px;
            border: 3px dotted $--color-success !important;
            background: rgba(103, 194, 58, 0.2) !important;
          }
        }
      }

      &>.is-select {
        /deep/ {
          .xdh-form-item {
            border: 3px dotted $--color-warning;
            background: rgba(230, 162, 60, 0.2);
            display: block;
            top: -16px;
            height: 30px;
          }
        }
      }
    }

    .xdh-form-item {
      position: relative;
      cursor: move;

      &.is-helper, &.is-helper.is-depend {
        /deep/ {
          .xdh-form-item__body {
            display: block;
            border: 3px dotted $--color-success !important;
            background: rgba(103, 194, 58, 0.2) !important;
          }
        }
      }

      &.is-select, &.is-select.is-depend {
        /deep/ {
          .xdh-form-item__body {
            display: block;
            border: 3px dotted $--color-warning;
            background: rgba(230, 162, 60, 0.2);
          }

          .handle-btns {
            display: block;
          }
        }
      }

      &.is-depend {
        /deep/ {
          .xdh-form-item__body {
            display: block;
            border: 3px dotted $--color-info;
            background: rgba(66, 66, 66, 0.05);
          }

          .depend-info {
            text-align: left;
            font-size: 12px;
            background: rgba(66, 66, 66, 0.4);
            color: $--color-white;
            padding: 3px;
            border-radius: 2px;
            position: absolute;
            left: 10px;
            top: -15px;
          }

          .handle-btns {
            display: none;
          }
        }
      }

      &.sortable-ghost {
        /deep/ {
          .xdh-form-item__body {
            display: block;
            border: none;
            background: $--color-warning-light;
            opacity: 0.5;
          }
        }
      }
    }

    /deep/ {
      .xdh-form__body {
        padding-top: 10px;
      }

      .is-empty {
        .xdh-form__body {
          height: calc(100% - 100px);
        }
      }

      .xdh-grid__item {
        display: inline-block;
        height: 40px;
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: $--color-danger-light;

        * {
          display: none;
        }
      }

      .el-form--inline {
        .xdh-grid__item {
          width: 150px;
        }
      }

      .xdh-form-item__body {
        display: none;
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 100%;
        left: 0;
        top: -3px;
        border-radius: $--border-radius-base;
      }
    }

    .mask {
      height: 100%;
    }
  }

  .app.desktop {
    margin-top: 5px;
  }

  .app.desktop:before {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: -30px;
    height: 30px;
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: 1366px auto;
    background-position: 50% bottom;
    background-image: url('../../../assets/image/ruler.png');
  }

  .phoneSize {
    position: relative;
    width: auto;
    height: 20px;
    top: -13px;
    margin: 0 auto;
    background-color: rgba(16, 16, 16, 0.8196078431372549);

    &:hover {
      .phoneItem.active {
        color: transparent;
        background-color: transparent;
        box-shadow: none;
      }
    }

    .phoneItem {
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      line-height: 20px;
      transform: translate(-50%, 0);
      border: solid #000;
      border-width: 0 3px;
      box-sizing: content-box;
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      color: transparent;

      &.active {
        color: #fff;
        background-color: rgba(39, 39, 39, 0.81);
        box-shadow: 0 2px 7px 1px #000;
      }

      &:hover {
        color: #fff !important;
        background-color: rgba(39, 39, 39, 0.81) !important;
        box-shadow: 0 2px 7px 1px #000 !important;
      }
    }

    .phone {
      display: none;
      width: 328px;
      height: 560px;
      z-index: 999;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      border-radius: 40px;
    }
  }

  .rubbish {
    background-color: #dddddd;
    position: absolute;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
    font-size: 30px;

    &:hover {
      color: red;
    }
  }
}

.handle-btns {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;

  i {
    padding: 5px 10px;
    cursor: pointer;
  }

  .el-icon-delete {
    color: $--color-danger;

    &:hover {
      opacity: 0.5;
    }
  }
}

.design-form {
  height: 100%;
  margin-right: 10px;
  margin-left: 10px;
}
</style>

